<template>
  <div style="position: relative">
    <Head/>
    <left/>

    <div style="position: absolute;top: 60px;left: 200px">
      <p>职务名称：<input type="text">职务编码：<input type="text">
        <van-button>查询</van-button>
        <van-button>重置</van-button>
      </p>
      <p>
        <van-button @click="chageshow">新增</van-button>
        <van-button>删除</van-button>
        <van-button>导入</van-button>
        <van-button>导出</van-button>

      </p>
      <table border="3" cellspacing="0" style="width:800px;text-align: center">
        <tr>

          <td>级别</td>
          <td>名称</td>
          <td>编码</td>
          <td>描述</td>

          <td>操作</td>
        </tr>
        <tr v-for="i in zhiwu" :key="i.id">

          <td>{{ i.level }}</td>
          <td>{{ i.name }}</td>
          <td>{{ i.zwcode }}</td>
          <td>{{ i.content }}</td>
          <td></td>
        </tr>
      </table>
      <van-form v-show="show">
        <van-field label="职务名称" v-model="form.name"></van-field>
        <van-field label="职务编码" v-model="form.zwcode"></van-field>
        <van-field label="职务描述" v-model="form.content"></van-field>
        <van-field label="职务级别" v-model="form.level"></van-field>


        <van-button round style="color: cornflowerblue" @click="add">添加</van-button>
        <van-button round style="color: cornflowerblue" @click="colseshow">关闭</van-button>
      </van-form>


    </div>

  </div>
</template>

<script>
import head from "@/components/head";
import left from "@/components/left";
import maxios from "@/http/axios";

export default {
  components: {
    'Head': head,
    'left': left
  },
  name: "zhiwu",
  data() {
    return {
      form: {},
      show: false,
      zhiwu: []
    }
  },
  methods: {
    chageshow() {
      this.show = true
    },
    colseshow() {
      this.show = false
    },
    add() {
      maxios('/compan/zhiwu', 'post', this.form).then(res => {
        if (res.code == 200) {
          alert('添加成功')
          this.form = {}
        }
      })

    },
    getgangwei() {
      maxios('/compan/zhiwu', 'get')
          .then(res => {
            if (res.code==200) {
              this.zhiwu = res.list
            }
          })
    }

  },
  mounted() {
    this.getgangwei()
  }
}
</script>

<style scoped>

</style>